<template>
  <view class="disease-inspection">
    <view class="head rbox box_y_end">
      <text class="tit">送检类型</text>
      <view class="tip" v-if="oState == 0">（请选择）</view>
      <view class="tip" v-if="oState == 1"
        >（已选择<text>病样检测</text>）</view
      >
      <view class="tip" v-if="oState == 2"
        >（已选择<text>微生物菌落分析</text>）</view
      >
    </view>

    <view class="list rbox_wrap">
      <view
        :class="['item', 'cbox', 'box_center', { active: oState == 1 }]"
        @tap="diseaseTest"
      >
        <text>病样检测</text>
        <text>1000元/次</text>
      </view>
      <view
        :class="['item', 'cbox', 'box_center', { active: oState == 2 }]"
        @tap="analysis"
      >
        <text>微生物菌落分析</text>
        <text>2000元/次</text>
      </view>
    </view>

    <view class="disease-test cbox" v-if="oState == 1">
      <text class="name rbox">病样检测标准</text>
      <view class="section cbox">
        <text class="rbox">霜霉病指的是由真菌中的霜霉菌引起的植物病害</text>
        <text class="rbox">霜霉病指的是由真菌中的霜霉菌引起的植物病害</text>
        <text class="rbox">霜霉病指的是由真菌中的霜霉菌引起的植物病害</text>
        <text class="rbox">霜霉病指的是由真菌中的霜霉菌引起的植物病害</text>
        <text class="rbox">霜霉病指的是由真菌中的霜霉菌引起的植物病害</text>
      </view>
      <view class="pay-wrap rbox box_x_center">
        需支付：<text>1000</text>元
      </view>
      <text class="sub rbox box_x_center"
        >（填写单号请到个人界面-我的送检）</text
      >
    </view>

    <view class="single-btn btn-normal rbox box_center btn-position"
					v-if="oState == 0"
					@tap="handlePop"
      >查看结果</view
    >
		<view class="single-btn btn-normal rbox box_center btn-position" @tap="goPage('payment')" v-else>
			立即支付
		</view>
		
		<van-popup :show="popState" @tap="onClose">
			<view class="pop-box cbox">
				<text class="name rbox">请确认是否需要免费诊断</text>
				<view class="btns rbox box_space_b">
					<view class="btn ok rbox box_center" @tap="onClose">是</view>
					<view class="btn no rbox box_center" @tap="onClose">否</view>
				</view>
			</view>
		</van-popup>
  </view>
</template>

<script>
	import { vanPopup } from "../../wxcomponents/vant/popup/index.js"
export default {
  data() {
    return {
			popState: false,
      oState: 0
    }
  },
	components: {
		vanPopup
	},
  methods: {
		goPage(url) {
			wx.navigateTo({
				url: `/pages/${url}/${url}`
			})
		},
		handlePop() {
			this.popState = true
		},
		onClose() {
			this.popState = false
		},
    diseaseTest() {
      this.oState = 1
    },
    analysis() {
      this.oState = 2
    }
  }
}
</script>

<style lang="scss" scoped>
.disease-inspection {
  .head {
    margin-top: 40rpx;
    padding: 0 42rpx;
    .tit {
      font-size: 40rpx;
      line-height: 1;
      color: #333;
    }
    .tip {
      font-size: 28rpx;
      line-height: 1;
      color: #8f8f8f;
      text {
        color: #1de1c3;
      }
    }
  }
  .list {
    margin-top: 20rpx;
    padding: 0 80rpx;
    .item {
      margin-bottom: 20rpx;
      width: 274rpx;
      height: 330rpx;
      font-size: 32rpx;
      line-height: 1.5;
      color: #fff;
      background: #dbc2c2;
      border-radius: 20rpx;
      &.active {
        text {
          color: #333;
        }
      }
      &:nth-of-type(2n) {
        margin-left: 42rpx;
      }
    }
  }
  .disease-test {
    padding: 0 42rpx;
    margin-top: 30rpx;
    .name {
      font-size: 32rpx;
      line-height: 1;
      color: #333;
    }
    .section {
      margin-top: 30rpx;
      text {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        line-height: 1;
        color: #8e8e8e;
      }
    }
    .pay-wrap {
      margin-top: 160rpx;
      font-size: 40rpx;
      line-height: 1;
      font-weight: 600;
      color: #6a6a6a;
      text {
        color: #f00;
      }
    }
    .sub {
      margin-top: 50rpx;
      font-size: 24rpx;
      line-height: 1;
      color: #6d6d6d;
    }
  }
	/deep/.van-popup {
		background-color: transparent;
	}
	.pop-box {
		padding: 40rpx 40rpx;
		width: 526rpx;
		min-height: 280rpx;
		border-radius: 30rpx;
		background-color: #fff;
		.name {
			margin-top: 20rpx;
			font-size: 40rpx;
			line-height: 1;
			color: #888;
		}
		.sub-wrap {
			margin-top: 20rpx;
			font-size: 28rpx;
			line-height: 1;
			color: #8e8e8e;
			text {
				color: #1DE1C3;
			}
		}
		.btns {
			margin-top: 52rpx;
			.btn {
				width: 188rpx;
				height: 66rpx;
				border: 1rpx solid #1DE1C3;
				border-radius: 34rpx;
				&.ok {
					color: #1DE1C3;
					background: #FFFFFF;
				}
				&.no {
					color: #fff;
					background: #1DE1C3;
				}
			}
		}
	}
}
</style>
